<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>${productCategory.name}</title>
		<%@ include file="../lib/vue/vue_common.jsp"%>
	<link rel="stylesheet" href="${ctx}/page/lib/vue/css/mescroll.min.css"/>
	<link rel="stylesheet" href="${ctx}/page/product/css/showcase_admin_with_components.css">
	<script type="text/javascript" src="${ctx}/page/lib/vue/js/mescroll.min.js"></script>
	
</head>
<body>
	<div id="app">
		<div class="container" v-cloak>
			<div id="mescroll" class="mescroll">
				<div class="goods-list-wrapper">
					<div class="cap-goods-list">
						<ul class="cap-goods-list__container cap-goods-list__container--list cap-goods-list__container--card" id="dataList">
							<li class="cap-goods-list__wrapper" v-for="product in products">
								<div class="cap-goods-list__item cap-goods-list__item--list card cap-goods-list__item--btn1 cap-goods-list__item--whitespace">
									<div  @click="goToDetail(product)">
										<div class="cap-goods-list__photo">
											<img data-lazy-log="0" data-lazy-log-id="400836059" class="lazy cap-goods-list__img" v-lazy.container="product.imgUrl">
										</div>
										<div class="cap-goods-list__info has-title has-price has-btn">
											<h3 class="title">{{product.name}}</h3>
											<p class="otherPrice">{{product.otherPriceName1}}：{{product.otherPrice1|fixed2}}&nbsp;贝币 </p>
											<p class="otherPrice2">{{product.otherPriceName2}}：{{product.otherPrice2|fixed2}}&nbsp;贝币</p>
											<p class="price">
												<em style="color:#f44">
												您：{{product.price|fixed2}}&nbsp;贝币
											   </em>
											</p>
										</div>
									</div>
									<div class="cap-goods-list__buy-btn-wrapper cap-goods-list__buy-btn-wrapper--1" @click="buyNow(product)">
										<div class="cap-goods-list__buy-btn-1">
											兑
										</div>
									</div>	
								</div>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		Vue.use(VueLazyload, {
			preLoad: 1.3,
			error: '${ctx}/page/lib/vue/img/1-1.png',
			loading: '${ctx}/page/lib/vue/img/1-1.png',
			attempt: 1
		});
		var app = new Vue({
			el: '#app',
			data: {
				products:null,
				mescroll:null,
				productCategoryId:"${productCategory.id}"
			},
			watch:{
			},
			methods: {
				goToDetail:function(product){
					window.location.href=product.detailUrl;
				},
				buyNow:function(product){
					window.location.href=mServerUrl+"/page/inputOrderInfo.htm?productId="+product.id+"&time="+((new Date()).getTime());
				},
				upCallback: function(page) {
					var self = this;
					getListDataFromNet(page.num, page.size,self.productCategoryId, function(data) {
						if(page.num == 1) self.products = [];
						self.products = self.products.concat(data);
						self.mescroll.endSuccess(data.length);
					}, function() {
						self.mescroll.endErr();
					});
				}
			},
			mounted: function(){
				var self = this;
				self.mescroll = new MeScroll("mescroll", {
					down: {
						auto: false, //是否在初始化完毕之后自动执行下拉回调callback; 默认true
					},
					up: {
						auto: true, 
						callback: self.upCallback, //上拉回调
						page:{size:20},
						empty:{ //配置列表无任何数据的提示
							warpId:"dataList",
							tip : "亲,暂无更多数据哦~" , 
						}
					},
				});
			}
		});
		function getListDataFromNet(pageNum,pageSize,productCategoryId,successCallback,errorCallback) {
          	axios.get("getProductListData.do", {
				params: {
					pageIndex: pageNum, //页码
					pageSize: pageSize, //每页长度
					productCategoryId:productCategoryId
				}
			}).then(function(response) {
               	successCallback&&successCallback(response.data.items);//成功回调
			}).catch(function(error) {
				errorCallback&&errorCallback()//失败回调
			});
		}
	</script>
</body>
</html>